<template>
  <div>
    <!-- 搜索框 -->
    <div :class="$q.screen.gt.xs ? 'row justify-end ' : 'row justify-center'">
      <q-select
        :dark="ui.isDark"
        input-class="q-ml-lg"
        :placeholder="$t('settingIndex.搜索')"
        use-input
        hide-dropdown-icon
        input-debounce="0"
        behavior="menu"
        outlined
        rounded
        v-model="srt"
        class="q-ma-lg"
        style="width: 20rem"
        input-style="font-size:1.3rem;"
        options-selected-class="text-deep-orange"
        :options="searchList"
        @input-value="getText"
      >
        <!-- 搜索提示框  -->
        <template v-slot:option="scope">
          <q-item
            v-bind="scope.itemProps"
            @click="router.push({ path: scope.opt.to })"
            v-show="text && scope.opt.label.toLowerCase().indexOf(text) > -1"
          >
            <q-item-section avatar>
              <q-icon :name="scope.opt.iconName" :color="scope.opt.iconColor" />
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ scope.opt.label }}</q-item-label>
            </q-item-section>
          </q-item>
        </template>

        <!-- 搜索框文字和放大镜图标 -->
        <template v-slot:append>
          <q-btn dark round color="secondary" icon="search"></q-btn>
        </template>
      </q-select>
    </div>

    <!--滚动条 -->
    <q-scroll-area style="width: 100%; height: calc(100% - 128px)">
      <!-- 设置列表 -->
      <q-list
        :dark="ui.isDark"
        class="q-mx-lg rounded-borders"
        :class="ui.isDark ? '' : 'bg-brand'"
        bordered
        v-if="useFunctionsStore().mode !== 'server'"
      >
        <q-item
          :dark="ui.isDark"
          clickable
          v-for="item in settingList"
          :key="item.label"
        >
          <q-item-section
            style="height: 3rem"
            @click="router.push({ path: item.to })"
          >
            <!-- 内容 -->
            <div class="row justify-between items-center">
              <div class="row justify-between items-center">
                <q-icon
                  right
                  size="1.5rem"
                  :name="item.iconName"
                  :color="item.iconColor"
                ></q-icon>
                <p
                  :class="ui.isDark ? 'white' : 'text-dark'"
                  class="q-ml-md q-mr-lg q-mb-none text-h6"
                >
                  {{ item.label }}
                </p>
              </div>
              <q-icon
                class="q-mr-none"
                left
                size="2.5rem"
                name="keyboard_arrow_right"
                :color="ui.isDark ? 'white' : 'dark'"
              ></q-icon>
            </div>
          </q-item-section>
        </q-item>
      </q-list>

      <q-list
        :dark="ui.isDark"
        class="q-ma-lg rounded-borders"
        :class="ui.isDark ? '' : 'bg-brand'"
        bordered
      >
        <!--        多语言-->
        <q-item
          :dark="ui.isDark"
          clickable
          v-if="useFunctionsStore().mode !== 'device'"
        >
          <q-item-section style="height: 3rem">
            <div class="row items-center">
              <div class="col-6 row items-center">
                <q-icon right size="1.5rem" name="translate" color="blue-6" />
                <p
                  :class="ui.isDark ? 'white' : 'text-dark'"
                  class="q-ml-md q-mr-lg q-mb-none text-h6"
                >
                  {{ $t("settingIndex.多语言切换") }}
                </p>
              </div>
              <div class="col-6 row justify-end">
                <q-select
                  :dark="ui.isDark"
                  color="indigo"
                  standout
                  borderless
                  @update:model-value="getLanguage"
                  behavior="menu"
                  v-model="language"
                  :options="options"
                  :label="$t('settingIndex.当前语言')"
                  style="width: 10rem"
                />
              </div>
            </div>
          </q-item-section>
        </q-item>
        <!--        暗色模式切换-->
        <q-item :dark="ui.isDark" clickable>
          <q-item-section style="height: 3rem">
            <div class="row items-center">
              <div class="col-6 row items-center">
                <q-icon right size="1.5rem" name="wb_sunny" color="blue-6" />
                <p
                  :class="ui.isDark ? 'white' : 'text-dark'"
                  class="q-ml-md q-mr-lg q-mb-none text-h6"
                >
                  {{ $t("settingIndex.暗色模式切换") }}
                </p>
              </div>
              <div class="col-6 row justify-end">
                <q-toggle
                  v-model="changeDark"
                  :icon="ui.isDark ? 'bedtime' : 'brightness_7'"
                  size="4rem"
                  :dark="ui.isDark"
                />
              </div>
            </div>
          </q-item-section>
        </q-item>
        <!--      快捷入口-->
        <tab-item />
      </q-list>
    </q-scroll-area>
  </div>
</template>
<script setup>
import { settingList } from "src/router/routerLinks";
import { useRouter } from "vue-router";
import { useUiStore } from "stores/ui";
import { useQuasar } from "quasar";
import { onBeforeMount, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { switchLanguage } from "src/hooks/useLanguage";
import TabItem from "components/setting/TabItem.vue";
import { useFunctionsStore } from "stores/functions";

const t = useI18n().t;
const $q = useQuasar();
const ui = useUiStore();
const router = useRouter();

const srt = ref(null); // 搜索筛选框选择
const text = ref(""); // 搜索下拉框选则内容
const searchList = []; // 搜索关键字对象列表

// 语种选择下拉框列表
const options = ref([
  { label: "Chinese - 简体中文", value: "zh-CN" },
  { label: "English - 英语", value: "en-US" },
]);
const language = ref(
  ...options.value.filter((item) => item.value === ui.language)
); // 语种
const changeDark = ref(ui.isDark); // 暗色 模式切换

onBeforeMount(() => {
  getSearchList();
});

// 暗色模式切换
watch(changeDark, (val) => {
  if (val) {
    ui.DarkIn();
  } else {
    ui.DarkOut();
  }
  $q.notify({
    message: t("settingIndex.切换成功"),
    type: "positive",
  });
});

// 获取搜索列表
function getSearchList() {
  settingList.forEach((item) => {
    searchList.push(item);
    if (item.list) {
      getList(item);
    }
  });
}
function getList(data) {
  data.list.forEach((item) => {
    searchList.push({
      label: item,
      to: data.to,
      iconName: data.iconName,
      iconColor: data.iconColor,
    });
  });
}

// 获取用户输入的内容
function getText(value) {
  text.value = value.trim().toLowerCase();
}

// 用户选择语言后 更新显示语言
function getLanguage(val) {
  const cancelChange = language.value;
  $q.dialog({
    message: `${t("settingIndex.确定切换为")} ${val.label} , ${t(
      "settingIndex.确认后将更新页面"
    )}`,
    dark: ui.isDark,
    ok: t("ok"),
  })
    .onOk(() => {
      switchLanguage(val.value);
    })
    .onCancel(() => {
      language.value = cancelChange;
    });
}
</script>

<style scoped>
.bg-brand {
  background-color: rgba(199, 197, 197, 0.4) !important;
}
</style>
